<template>
    <div class="el-row--flex">
      <el-date-picker v-model="startTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime" placeholder="开始日期" @change="calcResult(0)"
                      style="width: 200px" :clearable="true">
      </el-date-picker>
      <el-input v-model="interval" @change="calcResult(1)"
                @input="value=>interval=value.replace(/[^\d]/g,'')" style="width: 130px;margin: 0 10px"
                placeholder="请输入">
        <template slot="append">天</template>
      </el-input>
      <el-date-picker v-model="endTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime" placeholder="结束日期" @change="calcResult(2)"
                      style="width: 200px" :clearable="true" :picker-options="pickerOptions()">
      </el-date-picker>

    </div>
</template>

<script>
import moment from 'moment'
import {getFreeHour} from '@/api/order/index'
export default {
  name: 'DateRangePicker',
  props: {
    //数组 [开始时间，结束时间，时间间隔(可不传)]
    value:{
      type:Array,
      default:()=>([])
    }
  },
  data(){
    return {
      startTime:null,
      endTime:null,
      interval:null,
      freeHour:0
    }
  },
  watch:{
    value:{
      deep:true,
      immediate:true,
      handler(val){
        if(val && Array.isArray(val) && val.length>1){
          this.startTime = val[0];
          this.endTime = val[1];
          if(val.length===3){
            this.interval = val[2];
          }else {
            //自己算间隔几天
            this.calcInterVal();
          }
        }
      }
    }
  },
  created() {
    getFreeHour().then(res=>{
      this.freeHour = res.data||0;
    })
  },
  methods: {
    pickerOptions(){
      let that = this
      return {
        disabledDate(time) {
          return that.endTime ? time.getTime() < (moment(that.startTime).valueOf()-24*60*60*1000) : false;
        }
      }
    },
    calcResult(type){
      //计算规则，开始时间-->时间间隔-->结束时间
      if(0===type){
        if(this.startTime){
          if(this.interval){
            this.calcEndTime();
          }else if(this.endTime){
            this.calcInterVal();
          }
        }
      }else if(1===type){
        if(this.interval){
          if(this.startTime){
            this.calcEndTime();
          }else if(this.endTime){
            this.calcStartTime();
          }
        }
      }else if(2===type){
        if(this.endTime){
          if(this.startTime){
            this.calcInterVal();
          }else if(this.interval){
            this.calcStartTime();
          }
        }
      }

      this.$emit("input", [this.startTime, this.endTime, this.interval])
      this.$emit("change")
    },

    calcStartTime(){
      this.startTime = moment(this.endTime, "YYYY-MM-DD HH:mm:ss").subtract(this.interval, "days").format('YYYY-MM-DD HH:mm:ss')
    },

    calcEndTime(){
      this.endTime = moment(this.startTime, "YYYY-MM-DD HH:mm:ss").add(this.interval, "days").format('YYYY-MM-DD HH:mm:ss')
    },

    calcInterVal: function () {
      if(moment(this.endTime)<moment(this.startTime)){
        this.endTime = this.startTime
      }
      let hours = moment(this.endTime, "YYYY-MM-DD HH:mm:ss").diff(moment(this.startTime, "YYYY-MM-DD HH:mm:ss"), "second");
      this.interval = Math.ceil(Math.abs((hours-(this.freeHour*60*60))/24/60/60))
    }
  },
}
</script>

<style scoped>
</style>
